<template>
  <div style="height: 100vh; background: #e8e8e8; padding: 10px;">
    <!-- <van-list 
     :loading="loading" 
     :finished="finished" 
     finished-text="没有更多了"
    >
      <van-cell is-link v-for="item in issuesList" :key="item.id" :title="item.type" :label="item.description"
       @click="showDetail(item)"
       style="padding-top: 10px;"
      ></van-cell>
    </van-list> -->
    <div 
     v-for="item in issuesList" :key="item.id"
     style="padding: 10px; background-color: #fff; border-radius: 7px; margin-bottom: 10px;"
     @click="showDetail(item)"
    >
      <span style="font-size: 18px;color: #323233;">问题类型：{{ item.problemType }}</span>
      <!-- <van-icon name="clear" size="20" style="float: right;" @click="deleteIssues(item)"></van-icon> -->
      <div style="margin: 10px 0px;">
        <van-image
         v-for="i in item.urlList" :key="i.url" :src="i.url" fit="contain" width="3rem" height="3rem"
         style="margin-left: 10px;"
         @click.stop="showImage(i.url)"
        />
      </div>
      <span>描述：</span>
      <p style="font-size: 12px;color: #969799;">{{ item.remark }}</p>
    </div>
    
      <van-button type="info" icon="plus" round @click="addIssues" style="position: absolute; bottom: 10px; right:15px"></van-button>
      <van-button type="info" icon="arrow-left" round @click="onBack" style="margin-top: 10px; position: absolute;bottom: 10px; left: 15px;"></van-button>
    
    <!-- <van-popup round closeable v-model:show="showCenter" style="padding: 10px">
      
    </van-popup> -->
  </div>
</template>

<script>
import { Notify, ImagePreview } from 'vant'
import { getSealIssuesList } from '@api/rd/index'

export default {
  components: {},
  data() {
    return {
      loading: false,
      showCenter: false,
      finished: false,
      issuesList: [],
      billNo: '',
      sampleCode: '',
      ImagePreviewDialog: ''
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    addIssues() {
      this.$router.push({ path: 'sealIssuesAdd',query:{ billNo: this.billNo }})
    },
    showDetail(item) {
      this.$router.push({ path: 'sealIssuesDetail',query:{ id: item.id, billNo: this.billNo, problemType: item.problemType }})
      // console.log(item.id)
    },
    onBack(){
      this.$router.push({ path: 'sealIssuesMain', query: { sampleCode: this.sampleCode } })
    },
    showImage(url){
      const imgList = []
      imgList[0] = url
      this.ImagePreviewDialog = ImagePreview({
        images: imgList
      })
    },
    async loadData() {
      this.loading = true
      this.billNo = this.$route.query.billNo
      this.sampleCode = this.$route.query.sampleCode
      const params = {
        billNo: this.billNo
      }
      console.log(params)
      try {
        const res = await getSealIssuesList(params)
        if (res.code == 200) {
          this.issuesList = res.data
          this.issuesList.forEach(item => {
            this.$set(item,'urlList',[])
            item.imgurl.forEach(i => {
              const obj = {}
              const name = "url"
              obj[name] = i
              item.urlList.push(obj)
            })
          })
          console.log(this.issuesList)
        } else {
          if(res.msg){
            Notify({ type: 'warning', message: res.msg })
          }else{
            Notify({ type: 'warning', message: '获取问题列表失败！' })
          }
        }
        // this.issuesList = [
        //   { id: 1, type: '齐码样做工', description: 'dsahfbshjaf' },
        //   { id: 2, type: '全码穿着效果', description: 'bnmb45b34n232vyui4' },
        //   { id: 3, type: '工艺优化', description: '11111' }
        // ]
      } catch(error) {
        console.log(error)
        Notify({ type: 'warning', message: '获取问题列表异常！' })
      } finally {
        this.loading = false
      }
    },
    deleteIssues(item) {
      const params = {
        id: item.id,
        billNo: this.billNo
      }
      try {

      } catch(error) {
        Notify({ type: 'warning', message: '删除问题失败！' })
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
